<template>
    <div class="box">
        <h2>.sync</h2>

        <div>数据: {{ keyword }}</div>

        <!-- 
            实现父子组件间的数据同步:
            1. 将数据传递给子组件,子组件接收展示这个数据
            2. 子组件通过 $emit 触发父组件,传递参数,父组件接收到这个参数,修改数据
            3. 当数据发生变化的时候,又会通过 v-bind 绑定属性传递给子组件展示
        -->

        <Child1 :msg="keyword" @update:msg="keyword = $event"></Child1>

        <br>
        <br>
        <br>

        <Child1 :msg.sync="keyword"></Child1>

        <!--
            结论:
            .sync是由两个条件实现的
                1. :msg=""  绑定属性
                2. @update:msg="" 自定义事件
            
            这里绑定属性随便是什么属性都可以
                :xxx=""  -- 可以的
            如果绑定的属性是xxx,那么此时自定义事件的写法
                @update:xxx
                update是固定写法,:冒号后面的xxx是绑定的属性名

            场景:
                当封装子组件的时候,想要父子组件数据同步,可以使用.sync
            
            在哪见过:
                在 element-ui 中 dialog 组件见过 


            问: 组件的 v-model 和 .sync 都可以用于父子组件间的数据同步,什么时候用 v-model ? 什么时候用 .sync?
            答:
                当封装组件中有 input 框的时候,使用 v-model 去实现
                当封装组件中 没有 input 框的时候,使用 .sync 去实现
        -->
    </div>
</template>

<script>
// .sync 用于父子组件之间的数据同步
import Child1 from './Child1'
export default {
    name: "SyncTest",
    components: { Child1 },
    data() {
        return {
            keyword: '我爱你'
        }
    }
}
</script>

<style scoped>

</style>